<template>
  <div class="introduce-container" :class="{ 'leaving': isLeaving }">
    <!-- 科技特效背景 -->
    <div class="tech-bg">
      <div class="grid-overlay"></div>
      <div class="particles-container">
        <div v-for="i in 50" :key="i" class="particle" :style="`--delay: ${i * 0.1}s`"></div>
      </div>
      <div class="circuit-lines"></div>
      <div class="glow-sphere"></div>
      <div class="data-stream"></div>
    </div>

    <!-- 页面内容 -->
    <div class="content-wrapper" ref="contentRef">
      <!-- 头部区域 -->
      <header class="intro-header">
        <div class="cyber-badge">
          <div class="badge-inner">
            <span class="badge-text">V1.0</span>
          </div>
        </div>
        <h1 class="glitch-text" data-text="涛的技术博客">涛的技术博客</h1>
        <p class="subtitle">探索数字世界的无限可能</p>

        <!-- 添加计时器模块 -->
        <div class="study-timer">
          <div class="timer-container">
            <div class="timer-icon"></div>
            <div class="timer-text">自学前端已经</div>
            <div class="timer-value">{{ studyDuration }}</div>
          </div>
        </div>

        <div class="header-decoration">
          <div class="line"></div>
          <div class="circle"></div>
          <div class="line"></div>
        </div>
      </header>

      <!-- 博客介绍 -->
      <section class="section blog-intro section-visible">
        <div class="section-title">
          <span class="title-number">01</span>
          <h2>博客介绍</h2>
          <div class="title-decoration"></div>
        </div>

        <div class="content-columns">
          <div class="text-column">
            <p class="tech-paragraph">这个博客诞生于2025年，是我记录技术成长、分享编程见解的数字家园。以<span class="highlight">Web开发</span>、<span
                class="highlight">vue</span>和<span class="highlight">系统架构</span>为核心，融合了现代科技的美学与功能性。</p>

            <p class="tech-paragraph">站点采用前沿的<span
                class="highlight">Vue3+TypeScript+NodeJs</span>构建，结合最新的响应式设计理念，确保在任何设备上都能获得出色的浏览体验。每一行代码都经过精心优化，追求性能与用户体验的完美平衡。
            </p>

            <div class="feature-list">
              <div class="feature-item">
                <div class="feature-icon code-icon"></div>
                <div class="feature-text">
                  <h3>技术分享</h3>
                  <p>深入浅出的编程教程和最新技术趋势解析</p>
                </div>
              </div>

              <div class="feature-item">
                <div class="feature-icon project-icon"></div>
                <div class="feature-text">
                  <h3>项目展示</h3>
                  <p>个人与团队项目的详细记录与心得</p>
                </div>
              </div>

              <div class="feature-item">
                <div class="feature-icon community-icon"></div>
                <div class="feature-text">
                  <h3>社区互动</h3>
                  <p>开放的讨论平台，连接志同道合的开发者</p>
                </div>
              </div>
            </div>
          </div>

          <div class="visual-column">
            <div class="tech-metrics">
              <div class="metric-item">
                <div class="metric-value">568</div>
                <div class="metric-label">技术文章</div>
                <div class="metric-bar" style="width: 85%"></div>
              </div>
              <div class="metric-item">
                <div class="metric-value">48</div>
                <div class="metric-label">项目案例</div>
                <div class="metric-bar" style="width: 65%"></div>
              </div>
              <div class="metric-item">
                <div class="metric-value">1.2k</div>
                <div class="metric-label">代码片段</div>
                <div class="metric-bar" style="width: 75%"></div>
              </div>
              <div class="metric-item">
                <div class="metric-value">97%</div>
                <div class="metric-label">问题解决率</div>
                <div class="metric-bar" style="width: 97%"></div>
              </div>
            </div>

            <div class="tech-sphere">
              <div class="sphere-tag" style="top: 20%; left: 70%">Vue.js</div>
              <div class="sphere-tag" style="top: 40%; left: 20%">Express</div>
              <div class="sphere-tag" style="top: 60%; left: 85%">Node.js</div>
              <div class="sphere-tag" style="top: 75%; left: 30%">React</div>
              <div class="sphere-tag" style="top: 35%; left: 50%">TypeScript</div>
              <div class="sphere-tag" style="top: 90%; left: 60%">Uniapp</div>
              <div class="sphere-core"></div>
              <div class="sphere-orbit"></div>
              <div class="sphere-orbit" style="transform: rotate(60deg)"></div>
              <div class="sphere-orbit" style="transform: rotate(120deg)"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- 个人简介 -->
      <section class="section personal-intro section-visible">
        <div class="section-title">
          <span class="title-number">02</span>
          <h2>个人简介</h2>
          <div class="title-decoration"></div>
        </div>

        <div class="content-columns reverse">
          <div class="text-column">
            <div class="bio-header">
              <h3 class="bio-name">周涛涛</h3>
              <div class="bio-title">安徽理工大学 / 计算机科学与技术</div>
              <div class="bio-quote">"技术的价值在于创造，代码的美在于简洁"</div>
            </div>

            <p class="tech-paragraph">我们生来就是一个普通人，只不过在用力地活着</p>

            <p class="tech-paragraph">作为一个<span
                class="highlight">终身学习者</span>，我始终保持对新技术的热情和探索精神。在不断演变的技术环境中，我相信持续学习和实践是保持竞争力的关键。</p>

            <div class="skill-grid">
              <div class="skill-category">
                <h4>前端技术</h4>
                <div class="skill-tags">
                  <span class="skill-tag">Vue.js</span>
                  <span class="skill-tag">React</span>
                  <span class="skill-tag">TypeScript</span>
                  <span class="skill-tag">Element Plus</span>
                </div>
              </div>

              <div class="skill-category">
                <h4>后端技术</h4>
                <div class="skill-tags">
                  <span class="skill-tag">Node.js</span>
                  <span class="skill-tag">Mysql</span>
                  <span class="skill-tag">MongoDB</span>
                </div>
              </div>

              <div class="skill-category">
                <h4>开发工具</h4>
                <div class="skill-tags">
                  <span class="skill-tag">Git</span>
                  <span class="skill-tag">Docker</span>
                  <span class="skill-tag">VS Code</span>
                  <span class="skill-tag">Trae</span>
                </div>
              </div>

              <div class="skill-category">
                <h4>专业技能</h4>
                <div class="skill-tags">
                  <span class="skill-tag">系统设计</span>
                  <span class="skill-tag">性能优化</span>
                  <span class="skill-tag">技术管理</span>
                  <span class="skill-tag">团队协作</span>
                </div>
              </div>
            </div>
          </div>

          <div class="visual-column">
            <div class="profile-container">
              <div class="profile-frame">
                <div class="profile-avatar">
                  <img src="../assets/avatar.jpg" alt="个人头像"
                    onerror="this.src='https://via.placeholder.com/300x300?text=Avatar'">
                </div>
                <div class="avatar-decoration"></div>
              </div>

              <div class="profile-stats">
                <div class="stat-item">
                  <div class="stat-icon education-icon"></div>
                  <div class="stat-info">
                    <div class="stat-value">本科</div>
                    <div class="stat-label">计算机科学与技术</div>
                  </div>
                </div>

                <div class="stat-item">
                  <div class="stat-icon experience-icon"></div>
                  <div class="stat-info">
                    <div class="stat-value">0年</div>
                    <div class="stat-label">开发经验</div>
                  </div>
                </div>

                <div class="stat-item">
                  <div class="stat-icon projects-icon"></div>
                  <div class="stat-info">
                    <div class="stat-value">20+</div>
                    <div class="stat-label">完成项目</div>
                  </div>
                </div>
              </div>

              <div class="contact-links">
                <a href="https://github.com/ztt2006" target="_blank" class="contact-link github">
                  <span class="icon"></span>
                </a>
                <a href="https://gitee.com/ZhouTaotao666" target="_blank" class="contact-link gitee">
                  <span class="icon"></span>
                </a>
              </div>
              <!-- 新增联系方式模块 -->
              <div class="contact-info">
                <div class="contact-info-title">联系方式</div>
                <div class="contact-item">
                  <div class="contact-icon email-icon"></div>
                  <div class="contact-text">2743537306@qq.com</div>
                </div>
                <div class="contact-item">
                  <div class="contact-icon phone-icon"></div>
                  <div class="contact-text">131-5541-2382</div>
                </div>
                <div class="contact-item">
                  <div class="contact-icon location-icon"></div>
                  <div class="contact-text">安徽·淮南</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 博客特色 -->
      <section class="section blog-features section-visible">
        <div class="section-title">
          <span class="title-number">03</span>
          <h2>博客特色</h2>
          <div class="title-decoration"></div>
        </div>

        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-card-inner">
              <div class="feature-icon responsive-icon"></div>
              <h3>响应式设计</h3>
              <p>完美适配从手机到桌面的所有设备尺寸，无缝浏览体验</p>
              <div class="card-corner tl"></div>
              <div class="card-corner tr"></div>
              <div class="card-corner bl"></div>
              <div class="card-corner br"></div>
            </div>
          </div>

          <div class="feature-card">
            <div class="feature-card-inner">
              <div class="feature-icon speed-icon"></div>
              <h3>高性能加载</h3>
              <p>优化的资源加载和渲染，让页面以闪电般速度呈现</p>
              <div class="card-corner tl"></div>
              <div class="card-corner tr"></div>
              <div class="card-corner bl"></div>
              <div class="card-corner br"></div>
            </div>
          </div>

          <div class="feature-card">
            <div class="feature-card-inner">
              <div class="feature-icon search-icon"></div>
              <h3>智能搜索</h3>
              <p>强大的搜索功能，让您瞬间找到需要的内容</p>
              <div class="card-corner tl"></div>
              <div class="card-corner tr"></div>
              <div class="card-corner bl"></div>
              <div class="card-corner br"></div>
            </div>
          </div>

          <div class="feature-card">
            <div class="feature-card-inner">
              <div class="feature-icon dark-mode-icon"></div>
              <h3>深色模式</h3>
              <p>护眼的深色模式，提供舒适的夜间阅读体验</p>
              <div class="card-corner tl"></div>
              <div class="card-corner tr"></div>
              <div class="card-corner bl"></div>
              <div class="card-corner br"></div>
            </div>
          </div>

          <div class="feature-card">
            <div class="feature-card-inner">
              <div class="feature-icon code-highlight-icon"></div>
              <h3>代码高亮</h3>
              <p>优雅的代码片段展示，支持多种编程语言语法高亮</p>
              <div class="card-corner tl"></div>
              <div class="card-corner tr"></div>
              <div class="card-corner bl"></div>
              <div class="card-corner br"></div>
            </div>
          </div>

          <div class="feature-card">
            <div class="feature-card-inner">
              <div class="feature-icon comments-icon"></div>
              <h3>实时评论</h3>
              <p>互动的评论系统，促进技术交流与知识共享</p>
              <div class="card-corner tl"></div>
              <div class="card-corner tr"></div>
              <div class="card-corner bl"></div>
              <div class="card-corner br"></div>
            </div>
          </div>
        </div>

        <div class="cta-container">
          <button class="cta-button" @click="navigateToHome">
            <span class="btn-text">探索博客</span>
            <span class="btn-icon">→</span>
          </button>
          <div class="cta-decoration"></div>
        </div>
      </section>

      <!-- 页脚 -->
      <footer class="intro-footer">
        <div class="footer-content">
          <div class="copyright">© 2025 涛的技术博客 · 保留所有权利</div>
          <div class="footer-motto">"用代码构建世界，用思想改变未来"</div>
        </div>
        <div class="footer-decoration"></div>
      </footer>
    </div>

    <!-- 页面加载指示器 -->
    <div class="page-loader" :class="{ 'loaded': pageLoaded }">
      <div class="loader-content">
        <div class="loader-spinner"></div>
        <div class="loader-text">系统初始化中...</div>
        <div class="loader-progress">
          <div class="progress-bar" :style="{ width: loadProgress + '%' }"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const contentRef = ref<HTMLElement | null>(null);
const pageLoaded = ref(false);
const loadProgress = ref(0);
const isLeaving = ref(false);
const currentTime = ref(new Date());

// 计算学习时间
const studyDuration = computed(() => {
  const startDate = new Date('2024-09-15T00:00:00');
  const diff = currentTime.value.getTime() - startDate.getTime();

  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);

  return `${days}天 ${hours}小时 ${minutes}分 ${seconds}秒`;
});

// 更新时间的定时器
let timerInterval: any = null;

// 模拟加载进度
const simulateLoading = () => {
  let progress = 0;
  const interval = setInterval(() => {
    progress += Math.floor(Math.random() * 15) + 5;
    if (progress >= 100) {
      progress = 100;
      clearInterval(interval);
      setTimeout(() => {
        pageLoaded.value = true;
        initScrollAnimation();
      }, 500);
    }
    loadProgress.value = progress;
  }, 200);
};

// 初始化滚动动画
const initScrollAnimation = () => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('section-visible');
      }
    });
  }, {
    threshold: 0.2
  });

  document.querySelectorAll('.section').forEach(section => {
    observer.observe(section);
  });
};

// 页面离开动画
const navigateToHome = () => {
  isLeaving.value = true;
  setTimeout(() => {
    router.push('/overview');
  }, 800);
};

// 随机粒子动画
const animateParticles = () => {
  const particles = document.querySelectorAll('.particle');
  particles.forEach((particle: any) => {
    const x = Math.random() * 100;
    const y = Math.random() * 100;
    const size = Math.random() * 3 + 1;
    const duration = Math.random() * 10 + 10;

    particle.style.left = `${x}%`;
    particle.style.top = `${y}%`;
    particle.style.width = `${size}px`;
    particle.style.height = `${size}px`;
    particle.style.animationDuration = `${duration}s`;
  });
};

// 生命周期钩子
onMounted(() => {
  simulateLoading();
  animateParticles();

  // 每秒更新一次当前时间
  timerInterval = setInterval(() => {
    currentTime.value = new Date();
  }, 1000);

  // 每10秒更新一次粒子位置
  const particleInterval = setInterval(animateParticles, 10000);

  // 清理定时器
  onBeforeUnmount(() => {
    clearInterval(particleInterval);
    clearInterval(timerInterval);
  });
});

// 处理页面导航
const handlePageTransition = (e: any) => {
  if (e.target.tagName === 'A' && e.target.getAttribute('href').startsWith('/')) {
    e.preventDefault();
    isLeaving.value = true;
    setTimeout(() => {
      router.push(e.target.getAttribute('href'));
    }, 800);
  }
};

// 添加页面链接导航效果
onMounted(() => {
  if (contentRef.value) {
    contentRef.value.addEventListener('click', handlePageTransition);
  }

  onBeforeUnmount(() => {
    if (contentRef.value) {
      contentRef.value.removeEventListener('click', handlePageTransition);
    }
  });
});
</script>

<style lang="less" scoped>
// 颜色变量
@primary-color: #00c8ff;
@accent-color: #ff3860;
@dark-bg: #0a0e17;
@card-bg: #10151e;
@light-line: rgba(0, 200, 255, 0.3);
@text-color: #e6f5ff;
@glow-effect: 0 0 10px rgba(0, 200, 255, 0.4), 0 0 20px rgba(0, 200, 255, 0.2);
@highlight-color: #06f1b0;

// 基础样式
.introduce-container {
  position: relative;
  min-height: 100vh;
  background: @dark-bg;
  color: @text-color;
  font-family: 'SF Pro Display', 'Segoe UI', sans-serif;
  overflow-x: hidden;
  padding: 60px 0;

  &.leaving {
    animation: page-leave 0.8s forwards;
  }
}

.content-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  z-index: 10;
}

// 背景效果
.tech-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;

  .grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
      linear-gradient(to right, @light-line 1px, transparent 1px),
      linear-gradient(to bottom, @light-line 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.2;
  }

  .circuit-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 500 500"><path d="M100,100 Q150,150 200,100 T300,100 T400,100" stroke="%2300aeff" stroke-opacity="0.2" stroke-width="1" fill="none"/><path d="M100,200 Q250,250 300,200 T400,250" stroke="%2300aeff" stroke-opacity="0.2" stroke-width="1" fill="none"/><path d="M150,300 Q200,350 250,300 T350,300" stroke="%2300aeff" stroke-opacity="0.2" stroke-width="1" fill="none"/><circle cx="100" cy="100" r="3" fill="%2300aeff" fill-opacity="0.4"/><circle cx="200" cy="100" r="3" fill="%2300aeff" fill-opacity="0.4"/><circle cx="300" cy="100" r="3" fill="%2300aeff" fill-opacity="0.4"/><circle cx="400" cy="100" r="3" fill="%2300aeff" fill-opacity="0.4"/><circle cx="100" cy="200" r="3" fill="%2300aeff" fill-opacity="0.4"/><circle cx="300" cy="200" r="3" fill="%2300aeff" fill-opacity="0.4"/><circle cx="400" cy="250" r="3" fill="%2300aeff" fill-opacity="0.4"/><circle cx="150" cy="300" r="3" fill="%2300aeff" fill-opacity="0.4"/><circle cx="250" cy="300" r="3" fill="%2300aeff" fill-opacity="0.4"/><circle cx="350" cy="300" r="3" fill="%2300aeff" fill-opacity="0.4"/></svg>');
    background-size: 500px 500px;
    opacity: 0.3;
  }

  .glow-sphere {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(0, 200, 255, 0.1) 0%,
        rgba(0, 200, 255, 0) 70%);
    filter: blur(20px);
    animation: pulse 10s infinite alternate ease-in-out;
  }

  .data-stream {
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 1px;
    height: 60%;
    background: linear-gradient(to top,
        rgba(0, 200, 255, 0) 0%,
        rgba(0, 200, 255, 0.5) 50%,
        rgba(0, 200, 255, 0) 100%);
    filter: blur(1px);
    animation: data-flow 8s infinite;
    box-shadow: 0 0 5px rgba(0, 200, 255, 0.5);

    &::before {
      content: '';
      position: absolute;
      left: -100px;
      width: 1px;
      height: 80%;
      top: 10%;
      background: linear-gradient(to top,
          rgba(0, 200, 255, 0) 0%,
          rgba(0, 200, 255, 0.3) 50%,
          rgba(0, 200, 255, 0) 100%);
      animation: data-flow 12s infinite 2s;
    }

    &::after {
      content: '';
      position: absolute;
      left: 100px;
      width: 1px;
      height: 70%;
      top: 15%;
      background: linear-gradient(to top,
          rgba(0, 200, 255, 0) 0%,
          rgba(0, 200, 255, 0.4) 50%,
          rgba(0, 200, 255, 0) 100%);
      animation: data-flow 10s infinite 1s;
    }
  }
}

// 粒子效果
.particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;

  .particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: @primary-color;
    border-radius: 50%;
    box-shadow: 0 0 8px @primary-color;
    animation: particle-pulse 3s infinite alternate ease-in-out;
    opacity: 0.7;
  }
}

// 页面加载器
.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: @dark-bg;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s, visibility 0.5s;

  &.loaded {
    opacity: 0;
    visibility: hidden;
  }

  .loader-content {
    text-align: center;

    .loader-spinner {
      width: 60px;
      height: 60px;
      border: 2px solid transparent;
      border-top-color: @primary-color;
      border-left-color: @primary-color;
      border-radius: 50%;
      margin: 0 auto 20px;
      animation: spin 1s linear infinite;
      box-shadow: 0 0 15px rgba(0, 200, 255, 0.1);
    }

    .loader-text {
      font-size: 16px;
      color: @primary-color;
      margin-bottom: 15px;
      letter-spacing: 1px;
    }

    .loader-progress {
      width: 200px;
      height: 4px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      overflow: hidden;

      .progress-bar {
        height: 100%;
        background: @primary-color;
        border-radius: 2px;
        transition: width 0.3s;
        box-shadow: 0 0 10px @primary-color;
      }
    }
  }
}

// 头部样式
.intro-header {
  text-align: center;
  padding: 60px 0;
  position: relative;

  .cyber-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(16, 21, 30, 0.8);
    border: 1px solid @light-line;
    padding: 5px 12px;
    border-radius: 15px;
    color: @primary-color;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 0 15px rgba(0, 200, 255, 0.2);

    .badge-inner {
      position: relative;
      z-index: 1;

      &::before {
        content: '';
        position: absolute;
        top: -5px;
        left: -12px;
        right: -12px;
        bottom: -5px;
        background: rgba(0, 200, 255, 0.1);
        border-radius: 15px;
        z-index: -1;
        animation: badge-pulse 2s infinite alternate;
      }
    }
  }

  .glitch-text {
    font-size: 56px;
    font-weight: 800;
    color: white;
    text-shadow: 0 0 10px rgba(0, 200, 255, 0.3);
    position: relative;
    display: inline-block;
    margin: 40px 0 20px;
    letter-spacing: 1px;

    &::before,
    &::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    &::before {
      left: 2px;
      text-shadow: -2px 0 #ff00c1;
      animation: glitch-1 2s infinite linear alternate-reverse;
      clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
      opacity: 0.8;
    }

    &::after {
      left: -2px;
      text-shadow: 2px 0 #00fff9;
      animation: glitch-2 2s infinite linear alternate-reverse;
      clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
      opacity: 0.8;
    }
  }

  .subtitle {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
    letter-spacing: 1px;
    animation: fadeIn 1s 0.5s forwards;
    opacity: 0;
  }

  .header-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;

    .line {
      width: 60px;
      height: 1px;
      background: @light-line;
    }

    .circle {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1px solid @primary-color;
      margin: 0 15px;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        top: 2px;
        left: 2px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: @primary-color;
        box-shadow: 0 0 5px @primary-color;
      }
    }
  }

  .study-timer {
    margin-top: 20px;

    .timer-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: @primary-color;
      font-size: 16px;
      font-weight: 600;

      .timer-icon {
        width: 20px;
        height: 20px;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M12 1C5.93 1 1 5.93 1 12s4.93 11 11 11 11-4.93 11-11S18.07 1 12 1zm0 20c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9zm-.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>') no-repeat center center;
        background-size: contain;
      }

      .timer-text {
        color: rgba(255, 255, 255, 0.7);
      }

      .timer-value {
        color: @primary-color;
      }
    }
  }
}

// 章节样式
.section {
  margin: 100px 0;
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease;
  position: relative;

  &.section-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 40px;

    .title-number {
      font-size: 18px;
      font-weight: 600;
      color: @primary-color;
      margin-right: 15px;
      opacity: 0.8;
    }

    h2 {
      font-size: 36px;
      font-weight: 700;
      color: white;
      margin: 0;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 40%;
        height: 3px;
        background: linear-gradient(to right, @primary-color, transparent);
        border-radius: 3px;
      }
    }

    .title-decoration {
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, @light-line, transparent);
      margin-left: 20px;
    }
  }

  .content-columns {
    display: flex;
    gap: 40px;

    &.reverse {
      flex-direction: row-reverse;
    }

    .text-column {
      flex: 1;

      .tech-paragraph {
        font-size: 16px;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 20px;

        .highlight {
          color: @highlight-color;
          font-weight: 600;
        }
      }
    }

    .visual-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 30px;
    }
  }
}

// 博客介绍部分
.blog-intro {
  .feature-list {
    margin-top: 40px;

    .feature-item {
      display: flex;
      margin-bottom: 25px;

      .feature-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: rgba(6, 23, 44, 0.6);
        border: 1px solid @light-line;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        flex-shrink: 0;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          width: 20px;
          height: 20px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }
      }

      .code-icon::after {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M8.7 15.9L4.8 12l3.9-3.9c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0l-4.6 4.6c-.4.4-.4 1 0 1.4l4.6 4.6c.2.2.5.3.7.3.2 0 .5-.1.7-.3.4-.4.4-1 0-1.4zM15.3 15.9l3.9-3.9-3.9-3.9c-.4-.4-.4-1 0-1.4.4-.4 1-.4 1.4 0l4.6 4.6c.4.4.4 1 0 1.4l-4.6 4.6c-.2.2-.5.3-.7.3-.2 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4z"/></svg>');
      }

      .project-icon::after {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>');
      }

      .community-icon::after {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>');
      }

      .feature-text {
        h3 {
          font-size: 18px;
          font-weight: 600;
          color: white;
          margin: 0 0 8px;
        }

        p {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.7);
          margin: 0;
          line-height: 1.6;
        }
      }
    }
  }

  .tech-metrics {
    background: rgba(16, 21, 30, 0.6);
    border-radius: 12px;
    padding: 25px;
    border: 1px solid @light-line;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

    .metric-item {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .metric-value {
        font-size: 24px;
        font-weight: 700;
        color: @primary-color;
        margin-bottom: 2px;
      }

      .metric-label {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 8px;
      }

      .metric-bar {
        height: 4px;
        background: @primary-color;
        border-radius: 2px;
        box-shadow: 0 0 10px rgba(0, 200, 255, 0.3);
      }
    }
  }

  .tech-sphere {
    position: relative;
    height: 300px;
    background: rgba(16, 21, 30, 0.4);
    border-radius: 12px;
    border: 1px solid @light-line;
    overflow: hidden;

    .sphere-tag {
      position: absolute;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 500;
      font-size: 14px;
      padding: 5px 10px;
      background: rgba(6, 23, 44, 0.8);
      border-radius: 12px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(0, 200, 255, 0.2);
      animation: float 5s infinite ease-in-out;

      &:nth-child(odd) {
        animation-duration: 6s;
        animation-delay: 0.5s;
      }

      &:nth-child(3n) {
        animation-duration: 7s;
        animation-delay: 1s;
      }
    }

    .sphere-core {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 50px;
      height: 50px;
      background: @primary-color;
      border-radius: 50%;
      box-shadow: 0 0 30px @primary-color;
      opacity: 0.6;
      animation: pulse 3s infinite alternate;
    }

    .sphere-orbit {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      border: 1px dashed @light-line;
      border-radius: 50%;
      animation: rotate 20s linear infinite;
    }
  }
}

// 个人简介部分
.personal-intro {
  .bio-header {
    margin-bottom: 30px;

    .bio-name {
      font-size: 32px;
      font-weight: 700;
      color: white;
      margin: 0 0 5px;
      position: relative;
      display: inline-block;

      &::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, @primary-color, transparent);
      }
    }

    .bio-title {
      font-size: 18px;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 15px;
    }

    .bio-quote {
      font-style: italic;
      color: @highlight-color;
      font-size: 16px;
      position: relative;
      padding-left: 20px;

      &::before {
        content: '"';
        position: absolute;
        left: 0;
        top: 0;
        font-size: 24px;
        color: @primary-color;
      }
    }
  }

  .skill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 40px;

    .skill-category {
      h4 {
        font-size: 18px;
        color: white;
        margin: 0 0 15px;
        position: relative;
        padding-left: 15px;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 6px;
          width: 6px;
          height: 12px;
          background: @primary-color;
          border-radius: 3px;
        }
      }

      .skill-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .skill-tag {
          background: rgba(6, 23, 44, 0.6);
          border: 1px solid @light-line;
          border-radius: 15px;
          padding: 5px 12px;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.9);

          &:hover {
            background: rgba(0, 200, 255, 0.1);
            border-color: @primary-color;
            box-shadow: 0 0 10px rgba(0, 200, 255, 0.2);
            transform: translateY(-2px);
          }
        }
      }
    }
  }

  .profile-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;

    .profile-frame {
      position: relative;
      width: 200px;
      height: 200px;

      .profile-avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid @light-line;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
        position: relative;
        z-index: 2;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          filter: brightness(1.05) contrast(1.1);
          transition: all 0.5s;

          &:hover {
            transform: scale(1.05);
          }
        }
      }

      .avatar-decoration {
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        border: 1px dashed @light-line;
        border-radius: 50%;
        animation: rotate 20s linear infinite;

        &::before,
        &::after {
          content: '';
          position: absolute;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: @primary-color;
          box-shadow: 0 0 10px @primary-color;
        }

        &::before {
          top: 50%;
          left: -4px;
        }

        &::after {
          bottom: 20%;
          right: -4px;
        }
      }
    }

    .profile-stats {
      display: flex;
      gap: 20px;
      justify-content: center;
      margin: 20px 0;

      .stat-item {
        display: flex;
        align-items: center;

        .stat-icon {
          width: 30px;
          height: 30px;
          background: rgba(6, 23, 44, 0.6);
          border: 1px solid @light-line;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 10px;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
          }
        }

        .education-icon::after {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3zm7 10.16l-5 2.73-5-2.73v-3.32l5 2.73 5-2.73v3.32z"/></svg>');
        }

        .experience-icon::after {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>');
        }

        .projects-icon::after {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16h10v-7.5h1.5v5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V9c0-.69-.28-1.32-.73-1.77zM12 11v8H6V5h6v6z"/></svg>');
        }

        .stat-info {
          .stat-value {
            font-size: 16px;
            font-weight: 600;
            color: @primary-color;
          }

          .stat-label {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }
    }

    .contact-links {
      display: flex;
      gap: 15px;
      margin-top: 20px;
      margin-bottom: 5px;

      .contact-link {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(16, 21, 30, 0.6);
        border: 1px solid @light-line;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;

        .icon {
          display: block;
          width: 18px;
          height: 18px;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center;
        }

        &.github .icon {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.2 11.37.6.1.83-.26.83-.58 0-.28-.01-1.04-.02-2.04-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.33-1.76-1.33-1.76-1.09-.74.08-.73.08-.73 1.2.09 1.83 1.24 1.83 1.24 1.07 1.83 2.81 1.3 3.5 1 .1-.78.42-1.3.76-1.6-2.67-.3-5.47-1.34-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23.96-.26 1.98-.4 3-.4s2.04.14 3 .4c2.28-1.55 3.3-1.23 3.3-1.23.64 1.66.24 2.88.12 3.18.76.84 1.23 1.9 1.23 3.22 0 4.6-2.8 5.63-5.48 5.92.43.37.82 1.1.82 2.22 0 1.6-.01 2.9-.01 3.29 0 .32.22.7.83.58C20.56 21.8 24 17.3 24 12c0-6.63-5.37-12-12-12z"/></svg>');
        }

        &.gitee .icon {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="%2300c8ff"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z"/></svg>');
        }

        &.twitter .icon {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M24 4.56c-.88.39-1.83.65-2.83.77 1.02-.61 1.8-1.57 2.17-2.72-.95.56-2 .97-3.13 1.19-.9-.96-2.18-1.56-3.59-1.56-2.72 0-4.93 2.2-4.93 4.92 0 .39.04.77.12 1.13-4.1-.2-7.73-2.17-10.15-5.15-.42.73-.66 1.57-.66 2.47 0 1.7.87 3.21 2.19 4.09-.8-.03-1.56-.25-2.22-.61v.06c0 2.38 1.7 4.37 3.95 4.82-.41.11-.84.17-1.29.17-.31 0-.62-.03-.92-.08.63 1.96 2.45 3.38 4.61 3.42-1.69 1.32-3.82 2.11-6.13 2.11-.4 0-.79-.02-1.17-.07 2.19 1.4 4.79 2.22 7.58 2.22 9.06 0 14.01-7.5 14.01-14 0-.21 0-.42-.01-.63.96-.69 1.79-1.55 2.45-2.54z"/></svg>');
        }

        &.linkedin .icon {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.57h.05c.48-.9 1.64-1.85 3.38-1.85 3.61 0 4.28 2.38 4.28 5.47v6.26zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.56V9h3.56v11.45zM22.23 0H1.77C.8 0 0 .77 0 1.73v20.54C0 23.23.8 24 1.77 24h20.46c.98 0 1.77-.77 1.77-1.73V1.73C24 .77 23.2 0 22.23 0z"/></svg>');
        }

        &.email .icon {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
        }

        &:hover {
          transform: translateY(-3px);
          background: rgba(0, 200, 255, 0.1);
          border-color: @primary-color;
          box-shadow: 0 0 15px rgba(0, 200, 255, 0.3);
        }
      }
    }
  }
}

// 博客特色部分
.blog-features {
  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;

    .feature-card {
      height: 220px;
      perspective: 1000px;

      .feature-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        background: rgba(16, 21, 30, 0.6);
        border-radius: 10px;
        padding: 30px;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        border: 1px solid @light-line;
        text-align: center;

        .feature-icon {
          width: 60px;
          height: 60px;
          margin: 0 auto 20px;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
          }
        }

        .responsive-icon::after {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M21 3H3C2 3 1 4 1 5v10c0 1 1 2 2 2h18c1 0 2-1 2-2V5c0-1-1-2-2-2zm0 12H3V5h18v10zm-10 4h4v2h-4v-2z"/></svg>');
        }

        .speed-icon::after {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M19.77 7.23l.01-.01-3.72-3.72L15 4.56l2.11 2.11c-.94.36-1.61 1.26-1.61 2.33 0 1.38 1.12 2.5 2.5 2.5.36 0 .69-.08 1-.21v7.21c0 .55-.45 1-1 1s-1-.45-1-1V14c0-1.1-.9-2-2-2h-1V5c0-1.1-.9-2-2-2H6c-1.1 0-2 .9-2 2v16h10v-7.5h1.5v5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V9c0-.69-.28-1.32-.73-1.77zM12 11v8H6V5h6v6z"/></svg>');
        }

        .search-icon::after {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
        }

        .dark-mode-icon::after {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/></svg>');
        }

        .code-highlight-icon::after {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>');
        }

        .comments-icon::after {
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z"/></svg>');
        }

        h3 {
          font-size: 20px;
          font-weight: 600;
          color: white;
          margin: 0 0 10px;
        }

        p {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.7);
          line-height: 1.6;
          margin: 0;
        }

        .card-corner {
          position: absolute;
          width: 15px;
          height: 15px;
          border-color: @primary-color;

          &.tl {
            top: -1px;
            left: -1px;
            border-top: 2px solid;
            border-left: 2px solid;
          }

          &.tr {
            top: -1px;
            right: -1px;
            border-top: 2px solid;
            border-right: 2px solid;
          }

          &.bl {
            bottom: -1px;
            left: -1px;
            border-bottom: 2px solid;
            border-left: 2px solid;
          }

          &.br {
            bottom: -1px;
            right: -1px;
            border-bottom: 2px solid;
            border-right: 2px solid;
          }
        }

        &:hover {
          transform: translateY(-10px);
          box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
          border-color: @primary-color;
          background: rgba(0, 200, 255, 0.1);

          .card-corner {
            width: 25px;
            height: 25px;
            transition: all 0.3s;
          }

          &::before {
            opacity: 1;
          }
        }

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg,
              rgba(0, 200, 255, 0.15) 0%,
              rgba(0, 200, 255, 0) 50%,
              rgba(0, 200, 255, 0) 100%);
          border-radius: 10px;
          opacity: 0;
          transition: opacity 0.3s;
          pointer-events: none;
        }
      }
    }
  }

  .cta-container {
    text-align: center;
    margin-top: 50px;
    position: relative;

    .cta-button {
      position: relative;
      background: linear-gradient(to right, #0077B6, #00B4D8);
      color: white;
      border: none;
      font-size: 18px;
      font-weight: 600;
      padding: 15px 40px;
      border-radius: 8px;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.3s;
      font-family: inherit;
      letter-spacing: 1px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);

      .btn-text {
        position: relative;
        z-index: 2;
        transition: all 0.3s;
      }

      .btn-icon {
        position: relative;
        z-index: 2;
        margin-left: 8px;
        transition: all 0.3s;
        display: inline-block;
      }

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);

        .btn-icon {
          transform: translateX(5px);
        }

        &::before {
          transform: translateX(100%);
        }
      }

      &:active {
        transform: translateY(0);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      }

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0));
        transform: skewX(-15deg);
        transition: all 0.5s;
      }
    }

    .cta-decoration {
      position: absolute;
      width: 140%;
      height: 1px;
      background: linear-gradient(to right,
          rgba(0, 200, 255, 0),
          rgba(0, 200, 255, 0.5),
          rgba(0, 200, 255, 0));
      left: -20%;
      bottom: -30px;
    }
  }
}

// 页脚样式
.intro-footer {
  margin-top: 100px;
  text-align: center;
  position: relative;
  padding-bottom: 40px;

  .footer-content {
    .copyright {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.5);
      margin-bottom: 10px;
    }

    .footer-motto {
      font-size: 16px;
      color: @primary-color;
      font-style: italic;
    }
  }

  .footer-decoration {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(to right,
        rgba(0, 200, 255, 0),
        rgba(0, 200, 255, 0.3),
        rgba(0, 200, 255, 0));
  }
}

// 动画关键帧
@keyframes pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes badge-pulse {
  0% {
    opacity: 0.2;
  }

  100% {
    opacity: 0.6;
  }
}

@keyframes data-flow {
  0% {
    height: 0;
    top: 100%;
    opacity: 0;
  }

  20% {
    height: 20%;
    top: 80%;
    opacity: 1;
  }

  80% {
    height: 80%;
    top: 10%;
    opacity: 1;
  }

  100% {
    height: 0;
    top: 0;
    opacity: 0;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes particle-pulse {
  0% {
    opacity: 0.3;
    transform: scale(0.8);
  }

  100% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glitch-1 {
  0% {
    transform: translateX(0);
  }

  80% {
    transform: translateX(0);
  }

  85% {
    transform: translateX(-3px);
  }

  90% {
    transform: translateX(3px);
  }

  95% {
    transform: translateX(-3px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes glitch-2 {
  0% {
    transform: translateX(0);
  }

  80% {
    transform: translateX(0);
  }

  85% {
    transform: translateX(3px);
  }

  90% {
    transform: translateX(-3px);
  }

  95% {
    transform: translateX(3px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes page-leave {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.95);
    filter: brightness(0);
  }
}

// 响应式调整
@media (max-width: 1200px) {
  .content-columns {
    gap: 30px;
  }

  .intro-header .glitch-text {
    font-size: 46px;
  }

  .section .section-title h2 {
    font-size: 32px;
  }
}

@media (max-width: 992px) {

  .content-columns,
  .content-columns.reverse {
    flex-direction: column;
  }

  .section {
    margin: 70px 0;
  }

  .tech-sphere {
    height: 250px;
  }

  .profile-container {
    margin-top: 40px;
  }

  .intro-header .glitch-text {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .intro-header {
    padding: 40px 0;

    .glitch-text {
      font-size: 34px;
    }

    .subtitle {
      font-size: 16px;
    }
  }

  .section {
    margin: 50px 0;

    .section-title h2 {
      font-size: 28px;
    }
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .skill-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .profile-stats {
    flex-direction: column;
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .intro-header .glitch-text {
    font-size: 28px;
  }

  .section .section-title {
    flex-wrap: wrap;

    h2 {
      font-size: 24px;
      margin-top: 5px;
    }

    .title-decoration {
      display: none;
    }
  }

  .feature-item {
    flex-direction: column;
    text-align: center;

    .feature-icon {
      margin: 0 auto 15px;
    }
  }

  .blog-intro .tech-metrics .metric-value {
    font-size: 20px;
  }

  .personal-intro .bio-header .bio-name {
    font-size: 26px;
  }

  .cta-container .cta-button {
    padding: 12px 25px;
    font-size: 16px;
  }
}

// 添加计时器样式
.study-timer {
  margin: 25px auto 0;
  display: inline-flex;
  background: rgba(6, 23, 44, 0.7);
  border: 1px solid @light-line;
  border-radius: 20px;
  padding: 8px 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  animation: fadeIn 1s 0.8s forwards;
  opacity: 0;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right,
        rgba(0, 200, 255, 0),
        rgba(0, 200, 255, 0.7),
        rgba(0, 200, 255, 0));
  }

  .timer-container {
    display: flex;
    align-items: center;
    gap: 10px;

    .timer-icon {
      width: 18px;
      height: 18px;
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      animation: spin 10s linear infinite;
    }

    .timer-text {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 500;
    }

    .timer-value {
      font-family: 'Consolas', monospace;
      font-size: 14px;
      color: @primary-color;
      font-weight: 600;
      text-shadow: 0 0 5px rgba(0, 200, 255, 0.5);
      letter-spacing: 0.5px;
    }
  }
}

/* 联系方式模块样式 */
.contact-info {
  margin-top: 25px;
  background: rgba(6, 23, 44, 0.7);
  border: 1px solid @light-line;
  border-radius: 10px;
  padding: 15px;
  width: 100%;
  max-width: 280px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: @primary-color;
    box-shadow: 0 0 10px @primary-color;
  }

  .contact-info-title {
    font-size: 16px;
    font-weight: 600;
    color: white;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid @light-line;
    text-align: center;
  }

  .contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    transition: all 0.3s;
    padding: 5px;
    border-radius: 5px;

    &:last-child {
      margin-bottom: 0;
    }

    &:hover {
      background: rgba(0, 200, 255, 0.1);
      transform: translateX(5px);
    }

    .contact-icon {
      width: 22px;
      height: 22px;
      margin-right: 12px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0.9;
    }

    .email-icon {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>');
    }

    .phone-icon {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>');
    }

    .location-icon {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2300c8ff"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>');
    }

    .contact-text {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.85);
      font-family: 'Consolas', monospace;
    }
  }
}

// 修改社交媒体图标
.contact-link {
  /* 保持原有样式 */

  &.gitee .icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="%2300c8ff"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z"/></svg>');
  }
}

// 其他原有样式保持不变...</style>